<div class="row">
  <div class="col-md-12 mb-3">
    <a
      href="{{$ctrl.createUrl}}"
      class="btn btn-sm btn-primary float-end px-4 me-2 text-white"
    >
      <i class="fas fa-plus"></i> Create data
    </a>
  </div>
</div>
<div
  class="alert alert-warning mb-0"
  role="alert"
  ng-if="$ctrl.data && !$ctrl.data.items.length"
>
  <i class="fas fa-exclamation-triangle"></i> There is no data has been created
  for this table yet!
</div>
<div class="" ng-if="!($ctrl.data && !$ctrl.data.items.length)">
  <div class="card-header py-1">
    <span ng-bind="$ctrl.header"></span>
    <div class="row" ng-if="$ctrl.columns">
      <div class="col-md-1"></div>
      <small
        ng-repeat="col in $ctrl.columns | orderBy:'priority' track by $index"
        ng-if="$index < $ctrl.maxCol"
        ng-bind="col.title"
        class="col-md-3"
      ></small>
      <div class="col text-end"></div>
    </div>
  </div>
  <div class="card-body" ng-if="!$ctrl.data">
    <div class="spinner-border text-primary" role="status">
      <span class="sr-only">Loading...</span>
    </div>
  </div>

  <div class="card-body py-0" ng-if="$ctrl.data">
    <div dnd-list="$ctrl.data.items" dnd-inserted="$ctrl.updateOrders(index)">
      <div
        ng-repeat="item in $ctrl.data.items | orderBy:'priority' track by $index"
        dnd-draggable="item"
        dnd-type="'item'"
        dnd-effect-allowed="copyMove"
        dnd-selected="$ctrl.selectedItem = item"
        dnd-dragstart="$ctrl.dragStart($index)"
        ng-class="{'selected': $ctrl.selectedItem === item}"
        class="row border-top"
      >
        <div class="col-md-1 form-inline">
          <div class="">
            <small class="fa fa-grip-vertical fa-xs me-2 text-black-50"></small>
            <!-- <input class="ml-1 form-control form-control-sm" ng-model="item.priority" style="width:30px" /> -->
          </div>
        </div>
        <div
          ng-if="$index < $ctrl.maxCol"
          ng-repeat="column in $ctrl.columns | orderBy: 'priority' track by $index"
          class="col-md-3"
        >
          <mix-column-preview
            model="item.attributeData.obj[column.name]"
            column="column"
            max-length="120"
          >
          </mix-column-preview>
        </div>
        <div class="col text-end">
          <div
            class="btn-group btn-group-sm"
            role="group"
            aria-label="Basic example"
          >
            <a
              class="btn btn-link text-primary"
              ng-click="$ctrl.view(item.attributeData)"
            >
              <span class="fa fa-eye"></span
            ></a>
            <a
              ng-click="$ctrl.updateData(item)"
              class="btn btn-link text-primary"
            >
              <span class="fas fa-pen"></span>
            </a>
            <a
              ng-click="$ctrl.removeData(item)"
              class="btn btn-link text-danger"
            >
              <span class="fas fa-trash-alt"></span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
